import React, { useState } from "react";
import { NavBar, Swiper, InfiniteScroll } from "antd-mobile";
import { useSelector } from "react-redux";
import { useNavigate, useSearchParams } from "react-router-dom";
import request from "../../api/request";
function Index() {
  const Info = () => {
    const avator =
      useSelector((state) => state.user.userInfo.avator) || "/public/th.jpg";
    return <img src={avator} alt="" width={40} height={40} />;
  };
  const navigate = useNavigate();
  const CityList = () => {
    const [searchParams] = useSearchParams();

    const city = searchParams.get("city") || "北京";
    return <span onClick={() => navigate("/city")}>{city}</span>;
  };
  //获取列表数据
  const [listData, setListData] = useState([]);
  const [pageCode, setPageCode] = useState(1);
  const getListData = () => {
    request
      .get("/room/list", {
        params: {
          pageCode,
        },
      })
      .then((res) => {
        console.log(res);

        setListData(listData.concat(res.data.data.list));
        console.log(setListData);
        setPageCode(pageCode + 1);
      });
  };

  return (
    <div>
      <NavBar backIcon={false} left={<Info />} right={<CityList />}>
        首页
      </NavBar>
      {/* 轮播图 */}

      <Swiper autoplay loop>
        <Swiper.Item>
          <img
            src="/public/1.jpg"
            alt=""
            style={{ width: "100%", height: "300px" }}
          />
        </Swiper.Item>
        <Swiper.Item>
          <img
            src="/public/2.jpg"
            alt=""
            style={{ width: "100%", height: "300px" }}
          />
        </Swiper.Item>
        <Swiper.Item>
          <img
            src="/public/3.jpg"
            alt=""
            style={{ width: "100%", height: "300px" }}
          />
        </Swiper.Item>
      </Swiper>
      {/* 列表 */}
      {listData.map((item) => {
        return (
          <dl key={item.id}>
            <dt >
              <img
                src={item.url}
                alt=""
                style={{ width: "100%", height: "200px" }}
              />
            </dt>
            <dd >
              <h4>名称:{item.name}</h4>
              <h4>描述:{item.title}</h4>
              <h4>价格:￥{item.price}</h4>
            </dd>
          </dl>
        );
      })}

      <InfiniteScroll loadMore={getListData} hasMore={true}></InfiniteScroll>
    </div>
  );
}

export default Index;
